<script setup lang="ts">
import { ref, watch, onMounted } from "vue";
const props = defineProps(["question", "isEdit"]);

const checkList = ref([]);

const emit = defineEmits(["onChange"]);
const onChange = (res: any) => {
  // console.log("多选", res);
  emit("onChange", res);
};

onMounted(() => {
  // console.log("是否有答案，解决刷新页面：", props.question);
  if (props.question.answer) {
    checkList.value = props.question.answer;
  } else {
    checkList.value = [];
  }
});
watch(
  () => props.question,
  (newValue, oldValue) => {
    // console.log("监测到选题变了：", newValue, oldValue);
    if (newValue.answer) {
      checkList.value = newValue.answer;
    } else {
      checkList.value = [];
    }
  }
);
</script>

<template>
  <el-checkbox-group v-model="checkList" @change="onChange" :disabled="isEdit">
    <div v-for="item in question.results" :key="item.option">
      <el-checkbox :label="item.option">
        <template #default>{{ item.value }}</template>
      </el-checkbox>
    </div>
  </el-checkbox-group>
</template>
